<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>放大镜</title>
	<style>
		* {
			margin: 0;
			padding: 0;
		}
		#box {
			width: 960px;
			margin: 100px auto;
		}
		#small_box {
			width: 430px;
			height: 430px;
			float: left;
			margin-right: 20px;
			position: relative;
		}
			
		#small_box .mask_box {
			width: 268.75px;
			height: 268.75px;
			background-color: yellow;
			opacity: 0.5;
			position: absolute;
			left: 0;
			top: 0;
			display: none;
			cursor: move;
		}

		#big_box {
			border: 1px solid black;
			float: left;
			width: 500px;
			height: 500px;
			overflow: hidden;
			position: relative;
		}
		#big_box img {
			position: absolute;
			left: 0;
			top: 0;
		}
	</style>
	<script src="ready.js"></script>
	<script src="event.js"></script>
	<script>
	addReady(function () {
		var small_box = document.getElementById('small_box');
		var mask_box = small_box.getElementsByTagName('div')[0];
		var big_box = document.getElementById('big_box');
		var big_img = big_box.getElementsByTagName('img')[0];
		// 给小盒子添加鼠标移入移出事件
		addEvent(small_box,'mouseenter',function () {
			mask_box.style.display = 'block';
			addEvent(small_box,'mousemove',function (evt) {
				var oEvent = evt || event;
				var disX = oEvent.pageX - small_box.offsetLeft - mask_box.offsetWidth / 2;
				var disY = oEvent.pageY - small_box.offsetTop - mask_box.offsetHeight / 2;
				if (disX <= 0) {
					disX = 0;
				}
				if (disY <= 0) {
					disY = 0;
				}
				if (disX >= small_box.offsetWidth - mask_box.offsetWidth) {
					disX = small_box.offsetWidth - mask_box.offsetWidth;
				}
				if (disY >= small_box.offsetHeight - mask_box.offsetHeight) {
					disY = small_box.offsetHeight - mask_box.offsetHeight;
				}
				mask_box.style.left = disX + 'px';
				mask_box.style.top = disY + 'px';
				//大图左边的值
				var big_left = (disX * (big_box.offsetWidth - big_img.offsetWidth)) / (small_box.offsetWidth - mask_box.offsetWidth);
				//大图上边的值
				var big_top = (disY * (big_box.offsetHeight - big_img.offsetHeight)) / (small_box.offsetHeight - mask_box.offsetHeight);
				//赋值
				big_img.style.left = big_left + 'px';
				big_img.style.top = big_top + 'px';
			});

		});

		addEvent(small_box,'mouseleave',function () {
			mask_box.style.display = 'none';
		})

	});
	</script>
</head>
<body>
	<div id="box">
		<div id="small_box">
			<img src="img/1.jpg" height="430" width="430" alt="">
			<div class="mask_box"></div>
		</div>
		<div id="big_box">
			<img src="img/b1.jpg" height="800" width="800" alt="">
		</div>
	</div>
</body>
</html>